<template>
  <div>
    <CloudTree
      checkable
      :tree-data="treeData"
      :defaultExpandAll="true"
      :replace-fields="replaceFields"
      @select="onSelect"
      @check="onCheck"
    />
  </div>
</template>

<script>

const treeData = [
  {
    name: 'parent 1',
    key: '0-0',
    isParent: true,
    child: [
      {
        name: '张晨成',
        key: '0-0-0',
        isParent: true,
        disabled: true,
        child: [
          { name: 'leaf0', key: '0-0-0-0' },
          { name: 'leaf1', key: '0-0-0-1' },
          { name: 'leaf2', key: '0-0-0-2', disabled: true },
        ],
      },
      {
        name: 'parent 1-1',
        key: '0-0-1',
        isParent: true,
        child: [],
      },
    ],
  },
];
export default {
  title: '3.自定义TreeNode字段 ',
  subTitle: '设置replaceFields来替换treeNode中 title,key,children字段为treeData中对应的字段',
  data() {
    return {
      treeData,
      replaceFields: {
        children: 'child',
        title: 'name',
      },
    }
  },
  methods: {
    onSelect(selectedKeys, info) {
      console.log('selected', selectedKeys);
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys);
    },
  }
}
</script>
<style lang="scss">
</style>